<template>
    <div id="second">
      <p>我是小弟组件</p>
      <!-- 如下代码$store.state重复编辑量比较多，降低开发效率
      下边要引入maState机制，进而简化如下操作
      -->
      <!-- <p>count的值为：{{$store.state.count}}</p>
      <p>count的值为：{{$store.state.count}}</p>
      <p>count1的值为：{{$store.state.count1}}</p>
      <p>count1的值为：{{$store.state.count1}}</p> -->

      <!-- 经过mapState处理，各个vuex成员可以像普通的"计算属性"一样被直接使用
        提高了开发效率
      -->
      <p>count的值为：
        <!--类似访问普通"计算属性"成员一样，访问vuex数据-->
        {{count}}--
        {{count}}--
        {{count1}}--
        {{count1}}--
      </p>
    </div>
</template>

<script>
// 导入mapState模块
import { mapState } from 'vuex'
export default {
  name: 'second',
  // 要在"计算属性"中应用mapState
  computed: {
    // ... 展开运算符
    // ...mapState( ['count', 'count1'] )
    /**
    mapState函数本质可以理解为如下：
    arr是数组形参
    function mapState(arr){
      return {
        arr[0]:function(){
          return this.$store.state.arr[0]
        },
        arr[1]:function(){
          return this.$store.state.arr[1]
        }
        ……
      }
    }
    */

    // 上述展开运算结果就是下边的效果
    count: function () {
      return this.$store.state.count
    },
    count1: function () {
      return this.$store.state.count1
    }
  }
}
</script>

<style lang="less" scoped>
#second{
  width: 350px;
  height: 200px;
  border:2px solid green;
  margin-top:10px;
}
</style>
